<template>
    <div id="box">
        <div class="container">
            <el-row type="flex" justify="space-between">

                <el-col :span="6">
                    <router-link to="/home">
                        <span><i class="el-icon-house"></i></span>
                        <p>首页</p>
                    </router-link>
                </el-col>

                <el-col :span="6">
                    <router-link to="/found">
                        <span class="">
                            <i class="el-icon-orange"></i>
                        </span>
                        <p>发现</p>
                    </router-link>
                </el-col>
                <el-col :span="6">
                    <router-link to="/order">
                        <span class="">
                            <i class="el-icon-tickets"></i>
                        </span>
                        <p>订单</p>
                    </router-link>
                </el-col>
                <el-col :span="6">
                    <router-link to="/me">
                        <span class="">
                            <i class="el-icon-user"></i>
                        </span>
                        <p>我</p>
                    </router-link>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
    export default {

    }
</script>
<style lang='less' scoped>
    #box {
        display: flex;
        justify-content: center;
        align-content: center;
        height: 60px;
        background-color: white;
    }

    .container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .el-row {
        width: 100%;
    }

    .el-col {
        text-align: center;
        
    }

    a {
        display: flex;
        flex-direction: column;
        text-decoration: none;
    }

    p {
        color: #222124;
        font-size: 10px;
    }

    .el-icon-user,
    .el-icon-tickets,
    .el-icon-orange,
    .el-icon-house {
        margin-bottom: 5px;
        font-size: 25px;
        color: #222124;
    }

    .active {
        p{
            font-weight: 800;
            transition: all .3s;
        }
        i{
            font-size: 25px;
            color: #FFCA0D;
            transition: all .3s;
        }
    }
</style>